<template>
  <avue-form :option="option" v-model="form" ></avue-form>
</template>

<script setup>
import { ref} from "vue";
const baseUrl = "https://cli.avuejs.com/api/area";

const form = ref({
  province: "410000",
  city: "410100",
});
const option = ref({
  labelWidth: 110,
  group: [
    {
      label: "客户信息",
      prop: "cc",
      column: [
        {
          label: "姓名",
          prop: "name",
          span: 8,
          rules: [
            {
              required: true,
              message: "请输入姓名",
              trigger: "blur",
            },
          ],
        },
        {
          label: "性别",
          prop: "sex",
          span: 8,
        },
        {
          label: "手机号",
          prop: "tel",
          span: 8,
        },
        {
          label: "是否添加微信",
          prop: "switch",
          type: "switch",
          dicData: [
            { label: "关", value: 0 },
            { label: "开", value: 1 },
          ],
          value: 1,
          span: 8,
        },
        {
          label: "微信号",
          prop: "tel",
          span: 8,
        },
        {
          label: "陪同人数",
          prop: "tel",
          span: 8,
        },
        {
          label: "省份",
          prop: "province",
          type: "select",
          props: {
            label: "name",
            value: "code",
          }, 
          cascader: ["city"],
          dicUrl: `${baseUrl}/getProvince`,
          rules: [
            {
              required: true,
              message: "请选择省份",
              trigger: "blur",
            },
          ],
          span: 8,
        },
        {
          label: "城市",
          prop: "city",
          type: "select",
          cascader: ["area"],
          props: {
            label: "name",
            value: "code",
          },
          row: true,
          dicUrl: `${baseUrl}/getCity/{{key}}?province={{province}}`,
          rules: [
            {
              required: true,
              message: "请选择城市",
              trigger: "blur",
            },
          ],
          span: 8,
        },
        {
          label: "到店次数",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
          dicData: [
            {
              label: "首次",
              value: 0,
            },
            {
              label: "再次",
              value: 1,
            },
            {
              label: "多次",
              value: 2,
            },
          ],
        },
      ],
    },
    {
      label: "需求分析",
      prop: "tksq",
      icon: "el-icon-view",
      column: [
        {
          label: "信息渠道",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
          dicData: [],
        },
        {
          label: "意向车型",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
        {
          label: "指导价",
          prop: "tel",
          type: "input",
          span: 8,
        },
        {
          label: "意向颜色",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
        {
          label: "意向级别",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
        {
          label: "精品对比车型(多条用,分割)",
          prop: "tel",
          type: "textarea",
          span: 8,
        },
        {
          label: "付款方式",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
        {
          label: "购车预算",
          prop: "tel",
          type: "input",
          span: 8,
        },
        {
          label: "首付金额",
          prop: "tel",
          type: "input",
          span: 8,
        },
        {
          label: "支付力",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
      ],
    },
    {
      label: "二手车置换",
      prop: "yhxx",
      icon: "el-icon-edit-outline",
      column: [
        {
          label: "是否置换",
          prop: "len",
          type: "switch",
          dicData: [
            { label: "关", value: 0 },
            { label: "开", value: 1 },
          ],
          value: 1,
          span: 8,
        },
        {
          label: "试驾记录",
          prop: "lens",
          type:'input',
          span:8
        },
        {
          label: "试驾车型",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
        {
          label: "试驾时长(分)",
          prop: "lens",
          type:'input',
          span:8
        },
        {
          label: "试驾反馈",
          prop: "lens",
          type:'textarea',
          span:8
        },
        {
          label: "试驾专员",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
        {
          label: "陪同专员",
          prop: "tel",
          type: "select",
          span: 8,
          allowCreate: true,
          filterable: true,
        },
      ],
    },
    {
        label: "接待结果",
        prop: "yhxx",
        icon: "el-icon-edit-outline",
        column:[
        {
          label: "接待结果详情",
          prop: "tel",
          type: "textarea",
          span: 24,
        },
        ]
    },
    {
        label: "谈判过程",
        prop: "yhxx",
        icon: "el-icon-edit-outline",
        column:[
        {
          label: "谈判过程详情",
          prop: "tel",
          type: "textarea",
          span: 24,
        },
        ]
    },
    {
        label: "离店拦截",
        prop: "yhxx",
        icon: "el-icon-edit-outline",
        column:[
        {
          label: "一次拦截详情",
          prop: "tel",
          type: "textarea",
          span: 8,
        },
        {
          label: "二次拦截详情",
          prop: "tel",
          type: "textarea",
          span: 8,
        },
        {
          label: "三次拦截详情",
          prop: "tel",
          type: "textarea",
          span: 8,
        },
        ]
    },
    {
        label: "回访记录",
        prop: "yhxx",
        icon: "el-icon-edit-outline",
        column:[
        {
          label: "回访内容",
          prop: "tel",
          type: "textarea",
          span: 8,
        }
        ]
    }
  ],
});
</script>
